<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"/>
	<title>TagPanel Demo Page</title>
	<script type="text/javascript" src="../../core/lib/html.js"></script>
	<script type="text/javascript" src="../../core/lib/jspath.js"></script>
	<script type="text/javascript" src="../../core/lib/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../core/cdk.js"></script>
	<script type="text/javascript" src="../../core/editor.js"></script>
	<script type="text/javascript" src="../../core/textEditor.js"></script>
	<script type="text/javascript" src="../../core/defaultView.js"></script>
	
	<link rel="stylesheet" type="text/css" href="../../core/defaultView.css"/>
	<link rel="stylesheet" type="text/css" href="../../styles.css"/>
	
	<script type="text/javascript" src="../../core/lib/jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../core/lib/jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.css"/>
	
	
	<script type="text/javascript" src="tagPanel.js"></script>
	<link rel="stylesheet" type="text/css" href="tagPanel.css"/>
	
	<script type="text/javascript">
		var items = [
			{name:"item 1", tags:"test;editor;module"},
			{name:"item 2", tags:"editor;view;module"},
			{name:"item 3", tags:"test;editor;module"},
			{name:"item 4", tags:"module;manual"},
			{name:"item 5", tags:"test;development;library"},
			{name:"item 6", tags:"manual;editor;library"}
		];
		
		$(function(){
			$("#viewPanel").tagPanel(items, function(selectedTags, selectedItems){
				function template(){with(Html){
					return div(
						p("Selected Tags: ", selectedTags.length?selectedTags.join(";"):" NO TAGS SELECTED"),
						p("Selected Items: ", selectedItems.join(",")),
						div(
							apply(selectedItems, function(idx){
								var itm = items[idx]
								return div(
									span({style:"font-style:italic"}, "[", itm.tags, "] "),
									itm.name
								);
							})
						)
					);
				}}
				
				$("#out").html(template());
			});
		});
	</script>
</head>
<body>
	<h1>TagPanel Demo Page</h1>
	<div id="viewPanel"></div>
	<div id="out"></div>
</body>
</html>